<template>
	<div class="order">
		<div class="order-hd">
			<p></p>
			<p>{{title}}</p>
		</div>
		<div class="order-tt">{{titct}}</div>
		<div class="store-lt">
			<ul>
				<li v-for="(item,$index) in orderNoList" key="$index" @click="getOrderList(item, $index)">
					<div class="store-1">
						<p :class="{'a-up': !item.toggle, 'a-dw': item.toggle}"><i></i></p>
						<p>订单编号：{{item.orderNo}}</p>
					</div>
					<div class="store-2" v-show="item.toggle">
						<div>
							<p>
								<span>10-10 9:20:13</span>
								<span>客人下单</span>
								<b>交付时超时 04分钟33秒</b>
								<i></i>
							</p>
						</div>
					</div>
				</li>				
			</ul>
		</div>
		<!-- 没有展示更多数据 -->
		<div class="order-nw" v-show="flag"><p>没有更多了，亲</p></div>
	</div>
</template>

<style lang="less">
	@import "../less/order/order.main.less";
</style>

<script type="text/ecmascirpt-6">

	import Vue from 'vue'
	export default {

		name: "unusual_store",

		computed: {},

		data (){

			return {

				title: "超时订单",

				titct: "场内及时率60%-90%",

				flag: true,

				toggle: false,

				orderNoList: [
					{"orderNo": "1121212121212115454512"},
					{"orderNo": "1121212121212115454512"},
					{"orderNo": "1121212121212115454512"}
				]
			}

		},

		methods: {

			getOrderList(item) {
				this.$nextTick(()=> {
	　　　　　　　　this.orderNoList.forEach((item)=> {
		　　　　　　　  Vue.set(item,'toggle', this.toggle);
		　　　　　　});
	　　　　　　　　Vue.set(item,'toggle', !this.toggle);
	　　　　　　});
			}

		},

		components: {}

	}
</script>